<%--
  Created by IntelliJ IDEA.
  User: buf
  Date: 2018/8/14
  Time: 11:41
  首页 欢迎页
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <%@ include file="../common/common.jsp"%>
</head>
<body>
<div class="content-div">
    <%@ include file="../common/head.jsp"%>
    <div class="main-content clear-fix">
        <%-- BANNER begin --%>
        <div class="layui-carousel" id="banner">
            <div carousel-item>
                <div>条目1</div>
                <div>条目2</div>
            </div>
        </div>
        <%-- BANNER end --%>
        <%-- 乐谱列表 默认展示10条 --%>
        <div class="welcome-score-div" style="margin-top: 20px;">
            <div>
                <span class="layui-breadcrumb" lay-separator="/">
                    <a href="">乐谱</a>
                    <a href="">弹唱</a>
                    <a href="">指弹</a>
                    <a href="">更多</a>
                </span>
            </div>
            <div id="score-list-div">
                <div class="score-info">
                    <div class="score-img">
                        <img src="/image/qr-code.png">
                    </div>
                    <div class="score-label">
                        <span>标签:</span>
                        <span>摇滚</span>
                        <span>民谣</span>
                        <span>金属</span>
                        <span>blues</span>
                    </div>
                </div>
            </div>
        </div>

        <%-- 乐器列表 默认展示10条 --%>
        <div class="welcome-guitar-div" style="margin-top: 20px;">
            <div>
            <span class="layui-breadcrumb" lay-separator="/">
                <a href="">乐器</a>
                <a href="">电吉他</a>
                <a href="">民谣</a>
                <a href="">古典</a>
            </span>
            </div>
            <div id="guitar-list-div">
                <div class="guitar-info">
                    <div class="guitar-img">
                        <img src="/image/qr-code.png">
                    </div>
                    <div class="guitar-label">
                        <span>标签:</span>
                        <span>双摇</span>
                        <span>电箱</span>
                        <span>金属</span>
                        <span>blues</span>
                    </div>
                </div>
            </div>
        </div>

        <%-- 教程列表 默认展示10条 --%>
        <div class="welcome-tutorial-div" style="margin-top: 20px;">
            <div>
                <span class="layui-breadcrumb" lay-separator="/">
                    <a href="">教程</a>
                    <a href="">电吉他</a>
                    <a href="">民谣</a>
                    <a href="">尤克里里</a>
                </span>
            </div>
            <div id="tutorial-list-div">
                <div class="tutorial-info">
                    <div class="tutorial-img">
                        <img src="/image/qr-code.png">
                    </div>
                    <div class="tutorial-label">
                        <span>标签:</span>
                        <span>SOLO</span>
                        <span>指弹</span>
                        <span>金属</span>
                        <span>blues</span>
                    </div>
                </div>
            </div>
        </div>

        <%-- 视频列表 默认展示10条 --%>
        <div class="welcome-video-div" style="margin-top: 20px;">
            <div>
            <span class="layui-breadcrumb" lay-separator="/">
                <a href="">视频</a>
                <a href="">电吉他</a>
                <a href="">民谣</a>
                <a href="">尤克里里</a>
            </span>
            </div>
            <div id="video-list-div">
                <div class="video-info">
                    <div class="video-img">
                        <img src="/image/qr-code.png">
                    </div>
                    <div class="video-label">
                        <span>标签:</span>
                        <span>SOLO</span>
                        <span>指弹</span>
                        <span>金属</span>
                        <span>blues</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['carousel', 'element'], function(){
        var carousel = layui.carousel, element = layui.element;
        //建造实例
        carousel.render({
            elem: '#banner'
            ,width: '100%'//设置容器宽度
            ,height: '15%'
            ,arrow: 'always' //始终显示箭头
            ,autoplay: false
        });
    });
</script>
</html>
